<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>小普商城</title>
    <link rel="stylesheet" href="css/aui.css">
    <link rel="stylesheet" type="text/css" href="css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="css/aui-flex.css" />
    <link rel="stylesheet" href="css/goods_detail.css">
    <script type="text/javascript" src="js/base.js"></script>
</head>
<body>
<!--轮播图片详情页-->
<header class="aui-row aui-bar-top">
    <div class="aui-iconfont aui-col-xs-2 aui-icon-left goHome top_width_item top_item"></div>
    <div class="aui-tab aui-col-xs-7" id="tab">
        <div class="aui-tab-item aui-active" id="shangpin">商品</div>
        <div class="aui-tab-item" id="pingjia">评价</div>
        <div class="aui-tab-item" id="xiangqing">详情</div>
    </div>
    <!--分享图标-->
    <div class="aui-iconfont aui-col-xs-2 aui-icon-share top_width_item top_item" onclick="openActionsheet()"></div>
</header>
<input  value="<?= Yii::$app->session->get('refereid')?>" type="hidden" name="refereid" />
<input  value="<?= Yii::$app->session->get('referename')?>" type="hidden" name="referename" />
<input  value="<?= Yii::$app->session->get('refereimages')?>" type="hidden" name="refereimages" />
<section class="padding-top-header" id="app">
    <!--轮播-->
    <div id="aui-slide2" >
        <div class="aui-slide-wrap" >
            <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
                <div class="aui-content aui-padded-15">
               <span class="aui-text-success">
                    <img src="images/1.png" alt="">
                </span>
                </div>
            </div>
            <div class="aui-slide-node aui-slide-node-middle aui-slide-node-center">
                <div class="aui-content aui-padded-15">
                <span class="aui-text-success">
                    <img src="images/1.png" alt="">
                </span>
                </div>
            </div>
        </div>
        <div class="aui-slide-page-wrap"><!--分页容器--></div>
    </div>
    <div class="price">
        <div class="aui-flex-item-12 aui-border-l">
            <div class="aui-flex-col">
                <div class="aui-flex-item-8 aui-padded-t-15 aui-padded-l-15 aui-bg-info" style="position: relative;">
                    <span class="aui-font-size-20">￥8.</span><span class="aui-font-size-14">50</span>
                    <span class="aui-font-size-12" style="text-decoration:line-through">￥8.50</span>
                    <span class="aui-font-size-12">已有4人购买</span>
                </div>
                <div class="aui-flex-item-4 aui-padded-10 aui-border-l aui-bg-pink">
                    <p class=" aui-font-size-12 aui-padded-l-15">距结束还剩:</p>
                    <p class="aui-font-size-12 aui-padded-l-15">00:00:00</p>
                </div>
            </div>
        </div>
    </div>
    <div class="aui-flex-col aui-flex-item-12 aui-padded-l-15 aui-margin-t-15">
        <div class=" aui-flex-item-8">ABC甜睡夜用卫生巾</div>
        <div class="aui-iconfont aui-col-xs-2 aui-icon-share aui-flex-item-2 aui-flex-offset-2" onclick="openActionsheet()"></div>
    </div>
    <div class="aui-flex-col aui-flex-item-12 aui-padded-l-15 aui-font-size-12">
        <div class=" aui-flex-item-3">
            <span>重量:</span><span>5kg</span>
        </div>
        <div class=" aui-flex-item-6">
            <span>满88包邮</span><span>(20kg以内)</span>
        </div>
        <div class=" aui-flex-item-3">
            <span>月销:</span><span>50笔</span>
        </div>
    </div>
    <div style="clear: both"></div>
    <div class="aui-flex-item-12 aui-margin-t-10" style="background: #fff">
        <div class="aui-flex-col aui-padded-l-5">
            <div class="aui-flex-item-3 aui-padded-10" style="position: relative;">
                <div class="aui-flex-row">
                    <img class="aui-flex-item-3" src="images/选择.png" alt="">
                    <span class="aui-flex-item-8 aui-text-warning">运费</span>
                </div>

            </div>
            <div class="aui-flex-item-4 aui-padded-10 ">
                <img src="">
                <h5 class="aui-text-success">12小时发货</h5>
            </div>
            <div class="aui-flex-item-3 aui-padded-10 ">
                <img src="">
                <h5 class="aui-text-success">7天退货</h5>
            </div>
            <div class="aui-flex-item-1 aui-padded-10">
                <span class="aui-iconfont aui-icon-right"  onclick="openServe()"></span>
            </div>
        </div>
    </div>
    <div style="clear: both"></div>
    <div class="aui-flex-col" style="background: #fff">
        <ul class="aui-flex-item-12">
            <li class="aui-flex-item-2 aui-padded-l-15">促销</li>
            <li class="aui-flex-item-4 ">分享零元购</li>
            <li class="aui-flex-item-1 aui-padded-l-10 aui-flex-offset-4">
                <i class="aui-iconfont aui-icon-right"></i>
            </li>
        </ul>
    </div>
    <div style="clear: both"></div>
    <div class="zhengPin">小普自营 | 正品保证</div>
    <div class="aui-flex-col">
        <ul class="aui-flex-item-12">
            <li class="aui-flex-item-3 aui-margin-l-15">请选择分类</li>
            <li class="aui-flex-item-1 aui-flex-offset-7 popUp">
                <i class="aui-iconfont aui-icon-right"></i>
            </li>
        </ul>
    </div>
    <footer  class="aui-bar aui-bar-tab options ">
        <div class="aui-flex-col aui-margin-t-5" >
            <ul class="aui-flex-item-12">
                <li class="aui-flex-item-3 aui-padded-l-15" style="margin-top:-0.8rem">
                    <img src="images/1.png" alt="">
                </li>
                <li class="aui-flex-item-6 aui-text-left aui-padded-t-15 aui-font-size-12">
                    <div>￥398-418</div>
                    <div>库存 <span>198</span>件</div>
                    <div>请选择分类</div>
                </li>
                <li class="aui-flex-item-1 aui-flex-offset-2  closeBtn " >
                    <i  class=" aui-iconfont aui-icon-close"></i>
                </li>
            </ul>
            <div class="overflow">
                <section v-for="arb in goodsArb">
                    <div class="aui-flex-item-12 aui-padded-l-15 aui-margin-b-10" style="text-align: left">{{arb.attr_name}}</div>
                    <ul class="aui-flex-col aui-flex-item-12 aui-padded-l-15 aui-margin-b-10" v-bind:id="'f'+arb.attr_id">
                        <li class="aui-flex-item-3 aui-active" v-for="vv in arb.children" v-on:click="choseArb(vv.attr_id,vv.attr_value_id)" >
                            <input type="button" v-bind:value="vv.attr_value_name"  class="aui-padded-5" v-bind:id="'c'+vv.attr_value_id">
                        </li>
                    </ul>
                </section>
                <div class="aui-flex-col aui-flex-item-12 aui-margin-b-10 btnCount">
                    <div class="aui-flex-item-4 aui-padded-l-15"> 购买数量</div>
                    <div class="aui-bar aui-bar-btn aui-flex-item-4 aui-flex-offset-3" style="width:30%;" type="count" >
                        <div class="aui-bar-btn-item aui-font-size-14"  v-on:click="muchOrLess(-1)">
                            <i class="aui-iconfont aui-icon-minus"></i>
                        </div>
                        <div class="aui-bar-btn-item">
                            <input type="number" class="aui-input aui-text-center"  value="1" v-model="goodsNum">
                        </div>
                        <div class="aui-bar-btn-item aui-font-size-14" v-on:click="muchOrLess(1)">
                            <i class="aui-iconfont aui-icon-plus"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="aui-flex-col aui-flex-item-12">
                <div class="aui-flex-item-6">  <p><div class="aui-btn aui-btn-warning aui-btn-block">加入购物车</div></p></div>
                <div class="aui-flex-item-6">  <p><div class="aui-btn aui-btn-primary aui-btn-block">立即购买</div></p></div>
            </div>

        </div>
    </footer>

    <!--用户评论-->
    <div class="aui-flex-item-12  comment">
        <ul class="aui-flex-col aui-padded-l-15">
            <li class="aui-flex-item-4 aui-padded-10" style="position: relative;" @click="allComment()">
                <p><span>全部</span>(<span>0</span>)</p>
            </li>
            <li class="aui-flex-item-4 aui-padded-10" style="position: relative;" @click="goodComment">
                <p><span>好评</span>(<span>0</span>)</p>
            </li>
            <li class="aui-flex-item-4 aui-padded-10" style="position: relative;" @click="zhongPingComment()">
                <p><span>中评</span>(<span>0</span>)</p>
            </li>
            <li class="aui-flex-item-4 aui-padded-10" style="position: relative;" @click="chaPingComment()">
                <p><span>差评</span>(<span>0</span>)</p>
            </li>
            <li class="aui-flex-item-4 aui-padded-10" style="position: relative;" @click="imageComment()">
                <p><span>有图</span>(<span>0</span>)</p>
            </li>
        </ul>
    </div>
    <div class="aui-flex-item-12">
        <ul class="aui-flex-row btn_comment">
            <li class="aui-padded-l-15">用户评论(0)</li>
            <li class="aui-padded-l-15">暂未评论</li>
            <li class="aui-flex-offset-4 goComment">查看所有评论</li>
        </ul>
    </div>
    <a id="topBtn" href="javascript:scroll(0,0)">
        <img src="images/toTop.png" alt="">
    </a>

    <div class="aui-flex-col aui-flex-item-12 xiaoPu">
        <div class="aui-flex-item-2">
            <img src="images/1.png" class="aui-padded-r-10" style="width:2rem;border-radius:4px;" />
        </div>
        <div class="aui-flex-item-5">
            <div> 小普马桶旗舰店</div>
            <div> 08-09 11:05</div>
        </div>
    </div>
    <div class="aui-flex-col aui-flex-item-12 intro">
        <div class="aui-flex-item-4">
            <div class="aui-flex-row ">
                <div class="aui-flex-item-12">5</div>
                <div class="aui-flex-item-12">全部宝贝</div>
            </div>
        </div>
        <div class="aui-flex-item-4">
            <div class="aui-flex-row ">
                <div class="aui-flex-item-12">50000</div>
                <div class="aui-flex-item-12">关注人数</div>
            </div>
        </div>
        <div class="aui-flex-item-4">
            <div class="aui-flex-row" style="margin-top:-0.5rem;border:none">
                <div class="aui-flex-item-12">宝贝描述 <span class="aui-text-danger">5.0 高</span> </div>
                <div class="aui-flex-item-12">卖家服务 <span class="aui-text-danger">5.0 高</span></div>
                <div class="aui-flex-item-12">物流服务 <span class="aui-text-danger">5.0 高</span></div>
            </div>
        </div>

    </div>
</section>
<footer class="aui-bar aui-bar-tab">
    <div class="aui-bar-tab-item"  style="width: 3rem;">
        <i class="aui-iconfont aui-icon-star aui-text-warning"></i>
        <div class="aui-bar-tab-label aui-text-warning">收藏</div>
    </div>
    <div class="aui-bar-tab-item aui-bg-warning aui-text-white"  style="width: auto;">加入购物车</div>
    <div class="aui-bar-tab-item aui-bg-danger aui-text-white goBuy"  style="width: auto;">立即购买</div>
</footer>

<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/aui-slide.js"></script>
<script type="text/javascript" src="js/aui-tab.js"></script>
<script type="text/javascript" src="js/aui-actionsheet.js" ></script>
<script type="text/javascript" src="js/goods_detail.js"></script>

<script type="text/javascript">
    var userInfo = {//用户信息
        //for test
        userid:"cb90c740-c90a-11e7-a83c-e1886effa0e6",// window.localStorage.getItem("userid")//微信用户id
        openid:"o0NVevyCkCI7jR6cLMlIz8XjTy34",// window.localStorage.getItem("openid")
        access_token:"c5b2cebf15b205503560c4e8e6d1ea78",//window.localStorage.getItem("access_token")
    }
    var xpHome = new Vue({
        el:'#app',
        data:{
            goodsNum:1,
            showDetailGoods:{},  //显示详情
            goodsArb:[]//商品属性
        },
        methods:{
            allComment:function(){
                window.location.href="./comment.html"
            },
            goodComment:function(){
                window.location.href="./comment.html"
            },
            zhongPingComment:function(){
                window.location.href="./comment.html"
            },
            chaPingComment:function(){
                window.location.href="./comment.html"
            },
            imageComment:function(){
                window.location.href="./comment.html"
            },

            gohome:function(){//首页
                window.location.href = "index.html";
            },
            muchOrLess:function(type){//添加或减少 商品   type 1添加  -1减少
                if(type == 1){//添加  需要判断小于物品的总数
                    xpHome.goodsNum +=1;
                }else{//减少  判断 >=1
                    if(xpHome.goodsNum >1){
                        xpHome.goodsNum -=1;
                    }
                }
            },
            detailGoods:function(){//获取商品详情
                var params = {
                    "data['goods_id']":nUtils.getUrlParam("id"),
                    "userid":userInfo.userid,// base.js 里面获取保存的参数
                    "access_token":userInfo.access_token //base.js 里面获取保存的参数
                };
                $.ajax({
                    url:nUrls.getGoodsDesc,//参数需要补充 ？？
                    type:"post",
                    data:params,
                    contentType: "application/json;charset=utf-8",
                    success:function(result){
//                        var result=eval('('+data+')') ;
                        if(result && result.code===200){
                            xpHome.showDetailGoods = result.data;
                        }
                        console.log("=detailGoods=",result);
                    },
                    error:function(){
                        console.log("获取失败")
                    }
                })
            },
            getGoodsArb:function(){ //获取属性
                var data = {
                    goods_id:nUtils.getUrlParam("id"),
                    "_csrf":"gvE20MrH5DkD2KDdq-UIL5WeI1wYEmBCChja43LP6Gw_q6CF9XVFSaAgRIB-4LSQYkXNwYy2jjfdy1R3SzYFpQ=="
                };
                $.ajax({
                    url:nUrls.getGoodsArb, //参数请补充完成
                    type:"POST",
                    data: data,
                    success:function(data){
                        var result=eval('('+data+')') ;//JOSN 数据转 JOSN对象
                        if(result && result.code===200){
                            xpHome.goodsArb = result.data;
                        }
                        console.log("=getGoodsArb=",result);
                    },
                    error:function(){
                        console.log("获取失败")
                    }
                })
            },
            getGoodsInfo:function(){
                var data = {
                    goods_id:nUtils.getUrlParam("id"),
                    "_csrf":"gvE20MrH5DkD2KDdq-UIL5WeI1wYEmBCChja43LP6Gw_q6CF9XVFSaAgRIB-4LSQYkXNwYy2jjfdy1R3SzYFpQ=="
                };
                $.ajax({
                    url:nUrls.getGoodsInfo, //参数请补充完成
                    type:"POST",
                    data: data,
                    success:function(data){
                        var result=eval('('+data+')') ;//JOSN 数据转 JOSN对象
                        if(result && result.code===200){
                            xpHome.goodsInfo = result.data;
                        }
                        console.log("=getGoodsInfo=",result);
                    },
                    error:function(){
                        console.log("获取失败")
                    }
                })
            },
            choseArb:function(fid,id){//选择属性   属性点击事件
                $("#f"+fid+">li input").removeClass("aui-btn-info");
                $("#c"+id).addClass("aui-btn-info");

            }
        }
    });
    xpHome.detailGoods(); //获得详情商品
    xpHome.getGoodsArb(); //获取属性
    xpHome. getGoodsInfo();//获取商品信息
    //轮播
    apiready = function(){
        api.parseTapmode();
    }
    var tab = new auiTab({
        element:document.getElementById("tab")
    },function(ret){
        console.log(ret)
    });
    var slide2 = new auiSlide({
        container:document.getElementById("aui-slide2"),
        // "width":300,
        "height":240,
        "speed":300,
        "autoPlay": 0, //自动播放
        "pageShow":true,
        "loop":true,
        "pageStyle":'dot',
        'dotPosition':'center'
    })
    //    底部菜单栏
    var tabfooter= new auiTab({
        element:document.getElementById("footer")
    },function(ret){
//	    	console.log(ret);
        if(ret){
//	            document.getElementById("demo").textContent = ret.index;
//	            if(ret.index == 2){
//	            	 window.location.href = "/vlth5/view/progress_check.html";
//	            }else if(ret.index == 3){
//	            	 window.location.href = "/vlth5/view/vlt_org.html";
//	            }
        }
    });

    //    var topDiv = new auiTab({
    //        element:document.getElementById("topDiv")
    //    },function(ret){
    ////	    	console.log(ret);
    //    });

    // 商品 评价 详情自动切换 事件
    $(function(){
        window.onscroll = function(){
            var height =  document.documentElement.scrollTop;
            if(height<=300){
                $("#xiangqing").removeClass("aui-active");
                $("#pingjia").removeClass("aui-active");
                $("#shangpin").addClass("aui-active");
            }else if(height<500 && height>300){
                $("#shangpin").removeClass("aui-active");
                $("#xiangqing").removeClass("aui-active");
                $("#pingjia").addClass("aui-active");
            }else{
                $("#shangpin").removeClass("aui-active");
                $("#pingjia").removeClass("aui-active");
                $("#xiangqing").addClass("aui-active");
            }
        }
    });
</script>
</body>
</html>